<template>
  <div>
    <h1>Vue 条件渲染示例</h1>
    
    <!-- 1. v-if 基本用法 -->
    <div class="example">
      <h3>1. v-if 基本用法</h3>
      <button @click="awesome = !awesome">切换</button>
      <h2 v-if="awesome">Vue is awesome!</h2>
      <p>点击按钮切换 awesome 变量的值，查看效果</p>
    </div>

    <!-- 2. v-if 与 v-else 组合 -->
    <div class="example">
      <h3>2. v-if 与 v-else 组合</h3>
      <button @click="showVue = !showVue">Toggle</button>
      <h2 v-if="showVue">Vue is awesome!</h2>
      <h2 v-else>Oh no 😢</h2>
      <p>v-else 必须紧跟在 v-if 或 v-else-if 元素后面</p>
    </div>

    <!-- 3. v-else-if 链式使用 -->
    <div class="example">
      <h3>3. v-else-if 链式使用</h3>
      <div class="radio-group">
        <label>
          <input type="radio" v-model="type" value="A"> Type A
        </label>
        <label>
          <input type="radio" v-model="type" value="B"> Type B
        </label>
        <label>
          <input type="radio" v-model="type" value="C"> Type C
        </label>
        <label>
          <input type="radio" v-model="type" value="D"> Type D
        </label>
      </div>
      
      <div v-if="type === 'A'" class="result-type A">
        类型 A
      </div>
      <div v-else-if="type === 'B'" class="result-type B">
        类型 B
      </div>
      <div v-else-if="type === 'C'" class="result-type C">
        类型 C
      </div>
      <div v-else class="result-type default">
        不是 A/B/C 类型
      </div>
    </div>

    <!-- 4. <template> 上的 v-if -->
    <div class="example">
      <h3>4. &lt;template&gt; 上的 v-if</h3>
      <button @click="showContent = !showContent">切换内容</button>
      <template v-if="showContent">
        <h3>Title</h3>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
      </template>
      <p v-else>内容已隐藏</p>
      <p>使用 template 可以条件渲染多个元素而不添加额外的 DOM 节点</p>
    </div>

    <!-- 5. v-show 基本用法 -->
    <div class="example">
      <h3>5. v-show 基本用法</h3>
      <button @click="visible = !visible">切换显示</button>
      <h2 v-show="visible">Hello, Vue!</h2>
      <p>v-show 通过修改 CSS display 属性来控制显示/隐藏</p>
    </div>

    <!-- 6. v-if vs v-show 对比 -->
    <div class="example">
      <h3>6. v-if vs v-show 对比</h3>
      
      <div class="comparison">
        <div class="comparison-item">
          <h4>v-if 示例</h4>
          <button @click="ifVisible = !ifVisible">切换 v-if</button>
          <div v-if="ifVisible" class="compare-box">
            这个元素在条件为 false 时会从 DOM 中移除
          </div>
          <p><strong>DOM 状态:</strong> {{ ifVisible ? '存在于 DOM 中' : '从 DOM 中移除' }}</p>
        </div>
        
        <div class="comparison-item">
          <h4>v-show 示例</h4>
          <button @click="showVisible = !showVisible">切换 v-show</button>
          <div v-show="showVisible" class="compare-box">
            这个元素始终存在于 DOM 中，只是修改了 display 属性
          </div>
          <p><strong>DOM 状态:</strong> 始终存在，{{ showVisible ? 'display:block' : 'display:none' }}</p>
        </div>
      </div>
      
      <div class="notes">
        <p><strong>性能考虑:</strong></p>
        <ul>
          <li><strong>v-if:</strong> 更高的切换开销，适合条件很少改变的场景</li>
          <li><strong>v-show:</strong> 更高的初始渲染开销，适合频繁切换的场景</li>
        </ul>
      </div>
    </div>

    <!-- 7. v-if 与 v-for 同时使用 -->
    <div class="example">
      <h3>7. v-if 与 v-for 同时使用</h3>
      <button @click="showEvenNumbers = !showEvenNumbers">
        {{ showEvenNumbers ? '显示所有数字' : '只显示偶数' }}
      </button>
      
      <div class="numbers-container">
        <!-- 注意：当 v-if 和 v-for 同时存在时，v-if 会先执行 -->
        <div 
          v-for="n in numbers" 
          v-if="!showEvenNumbers || n % 2 === 0"
          :key="n"
          class="number-item"
          :class="{ even: n % 2 === 0, odd: n % 2 === 1 }"
        >
          {{ n }}
        </div>
      </div>
    </div>

    <!-- 8. 多条件组合示例 -->
    <div class="example">
      <h3>8. 多条件组合示例</h3>
      <div class="control-panel">
        <label>
          <input type="checkbox" v-model="userLoggedIn"> 用户已登录
        </label>
        <label>
          <input type="checkbox" v-model="isAdmin"> 是管理员
        </label>
      </div>
      
      <div v-if="userLoggedIn">
        <div v-if="isAdmin">
          <h4>管理员界面</h4>
          <p>您拥有所有权限</p>
        </div>
        <div v-else>
          <h4>用户界面</h4>
          <p>欢迎使用系统</p>
        </div>
      </div>
      <div v-else>
        <h4>请先登录</h4>
        <p>登录后才能使用系统功能</p>
      </div>
    </div>

    <!-- 9. template v-if 与 v-else 组合 -->
    <div class="example">
      <h3>9. template 中的 v-if 与 v-else 组合</h3>
      <button @click="showAdvanced = !showAdvanced">
        {{ showAdvanced ? '显示基础视图' : '显示高级视图' }}
      </button>
      
      <template v-if="showAdvanced">
        <div class="advanced-view">
          <h4>高级视图</h4>
          <p>这是包含多个元素的高级内容</p>
          <ul>
            <li>功能选项 1</li>
            <li>功能选项 2</li>
            <li>功能选项 3</li>
          </ul>
        </div>
      </template>
      
      <template v-else>
        <div class="basic-view">
          <h4>基础视图</h4>
          <p>这是包含多个元素的基础内容</p>
          <p>简洁明了</p>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'App',
  setup() {
    // 1. v-if 基本示例
    const awesome = ref(true)
    
    // 2. v-if 与 v-else 示例
    const showVue = ref(true)
    
    // 3. v-else-if 链式示例
    const type = ref('A')
    
    // 4. template v-if 示例
    const showContent = ref(true)
    
    // 5. v-show 示例
    const visible = ref(true)
    
    // 6. v-if vs v-show 对比
    const ifVisible = ref(true)
    const showVisible = ref(true)
    
    // 7. v-if 与 v-for 组合
    const showEvenNumbers = ref(false)
    const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    
    // 8. 多条件组合
    const userLoggedIn = ref(false)
    const isAdmin = ref(false)
    
    // 9. template v-if 与 v-else 组合
    const showAdvanced = ref(false)

    return {
      awesome,
      showVue,
      type,
      showContent,
      visible,
      ifVisible,
      showVisible,
      showEvenNumbers,
      numbers,
      userLoggedIn,
      isAdmin,
      showAdvanced
    }
  }
}
</script>